<template>
    <div class="outmain ba_f">
        <div class="maintitle">积分查询</div>
        <div class="pad_20 flex-bet">
            <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
                <el-form-item label="手机号/姓名/昵称">
                    <el-input v-model="formInline.keyword" size="medium" placeholder="手机号/姓名/昵称"></el-input>
                </el-form-item>
                <el-form-item label="注册时间">
                    <el-date-picker
                            v-model="formInline.timeData"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
                </el-form-item>
            </el-form>
            <div class="flex">

            </div>
        </div>
        <div class="tabledata">
            <el-table
                    :data="list"
                    stripe
                    style="width: 100%"
                    @selection-change="setSelectRows">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="portrait"
                        label="用户信息"
                >
                    <template slot-scope="scope">
                        <div class="flex flex-y-top">
                            <div class="">
                                <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
                            </div>
                            <div class="mar_l10">
                                <div class="flex">
                                    <div class="">{{scope.row.userName}}
                                        <el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.id}}）</el-tag>
                                    </div>
                                </div>
                                <p class="fon_12 color_9 mar_t5">小程序</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="userTel"
                        label="积分变化"
                >
                </el-table-column>
                <el-table-column
                        prop="vipcard"
                        label="备注"
                >
                </el-table-column>
                <el-table-column
                        prop="vipcard"
                        label="当前积分"
                >
                </el-table-column>
                <el-table-column
                        prop="createdAt"
                        label="操作时间"
                >
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
            <edit ref="edit" @fetchData="fetchData"></edit>
        </div>
    </div>
</template>
<script>
    import {getMemberLis, changeStatus,} from "@/api/user";
    import {changeDate} from "@/utils/index";

    export default {
        created() {
            this.fetchData();
        },
        data() {
            return {
                formInline: {
                    keyword: '',
                    timeData: ''
                },
                list: [],
                selectRows: "",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },

            }
        },
        methods: {
            async fetchData() {
                let startTime = '';
                let endTime = '';
                if (this.formInline.timeData) {
                    startTime = changeDate(this.formInline.timeData[0]);
                    endTime = changeDate(this.formInline.timeData[1]);
                }
                var params = {
                    page: this.page.currentPage,
                    keyword: this.formInline.keyword,
                    startTime,
                    endTime,
                }
                const {data, count} = await getMemberLis(params);
                this.list = data;
                this.page.total = count;
            },
            setSelectRows(val) {
                this.selectRows = val;
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
        }
    }
</script>
